<template>
  <div class="scroll-tabs">
    <!-- 滚动容器 -->
    <scroll-view
      :show-scrollbar="false"
      class="tabs-scroll"
      scroll-x
      :scroll-with-animation="true"
    >
      <!-- tabs列表 -->
      <view class="tabs-list">
        <view
          v-for="(item, index) in tabs"
          :key="index"
          :class="[
            'tab-item',
            mode === 'button' ? 'button-tab' : 'def-tab',
            currentIndex === index && mode === 'button'
              ? 'button-active'
              : currentIndex === index && mode !== 'button'
              ? 'def-active'
              : '',
          ]"
          @click="handleTabClick(index)"
          :ref="`tab${index}`"
        >
          {{ item.name }}
        </view>
      </view>

      <!-- 底部滑动条 -->
      <view
        class="slider"
        :style="{
          transform: `translateX(${sliderOffset}px)`,
          width: `${sliderWidth}px`,
        }"
      ></view>
    </scroll-view>
  </div>
</template>

<script>
export default {
  name: 'ScrollTabs',
  props: {
    // tabs数据
    tabs: {
      type: Array,
      required: true,
      default: () => [],
    },
    // 当前选中的索引
    value: {
      type: Number,
      default: 0,
    },
    mode: {
      type: String,
      default: '',
    },
    allowUse: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      currentIndex: this.value,
      scrollLeft: 0,
      sliderOffset: 0,
      sliderWidth: 0,
      tabWidths: [],
    }
  },
  watch: {
    value(newVal) {
      this.currentIndex = newVal
    },
  },
  methods: {
    // 处理tab点击
    handleTabClick(index) {
      if (!this.allowUse) return
      if (this.currentIndex === index) return
      this.currentIndex = index
      this.$emit('input', index)
      this.$emit('change', index)
    },
  },
}
</script>

<style lang="scss" scoped>
.scroll-tabs {
  position: relative;
  background-color: #fff;
  .tabs-scroll {
    white-space: nowrap;
    width: 100%;
    height: 36px;
    position: relative;
    ::-webkit-scrollbar {
      /* 隐藏滚动条，但依旧具备可以滚动的功能 */
      display: none;
      width: 0;
      height: 0;
      -webkit-appearance: none;
      background: transparent;
      color: transparent;
    }
  }

  .tabs-list {
    display: inline-flex;
    position: relative;
    height: 100%;
    gap: 6px;
  }

  .tab-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    font-size: 14px;
    color: #333333;
    position: relative;
    transition: all 0.3s;
    &.button-tab {
      background: $uni-color-success;
      border-radius: 20px;
    }
    &.def-tab {
      color: #333333;
    }
    &.button-active {
      background: $uni-color-primary;
      font-weight: 500;
      color: #ffffff;
    }
    &.def-active {
      color: $uni-color-primary;
      position: relative;
      font-weight: bold;
      z-index: 1;
      font-size: 15px;
      padding: 0;
      transition: all 0.3s;
      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 8px;
        background-color: #dae5df;
        bottom: 9px;
        left: 0;
        z-index: -1;
      }
    }
    &:active {
      opacity: 0.7;
    }
  }

  .slider {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: $uni-color-primary;
    transition: all 0.3s;
  }
}
</style>
